<template>
	<brs-page title="系统参数设置">
		<a-form ref="aFormRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" @submit="submit" class="form">
			<a-form-item label="系统名称" name="title">
				<a-input v-model:value="form.title" placeholder="请输入系统名称" allow-clear></a-input>
			</a-form-item>
			<a-form-item label="背景色" name="background">
				<a-input v-model:value="form.background" placeholder="请输入系统名称" allow-clear></a-input>
			</a-form-item>
			<a-form-item label="主题色" name="primaryColor">
				<a-input type="color" v-model:value="form.theme.primaryColor"></a-input>
			</a-form-item>
			<a-form-item label="info" name="infoColor">
				<a-input type="color" v-model:value="form.theme.infoColor"></a-input>
			</a-form-item>
			<a-form-item label="成功色" name="successColor">
				<a-input type="color" v-model:value="form.theme.successColor"></a-input>
			</a-form-item>
			<a-form-item label="进度条颜色" name="processingColor">
				<a-input type="color" v-model:value="form.theme.processingColor"></a-input>
			</a-form-item>
			<a-form-item label="错误色" name="errorColor">
				<a-input type="color" v-model:value="form.theme.errorColor"></a-input>
			</a-form-item>
			<a-form-item label="警告色" name="warningColor">
				<a-input type="color" v-model:value="form.theme.warningColor"></a-input>
			</a-form-item>
			<a-form-item label="阴影颜色" name="borderShadowColor">
				<a-input type="color" v-model:value="form.borderShadowColor"></a-input>
			</a-form-item>
			<a-form-item :wrapper-col="{ style: { marginLeft: '100px' } }">
				<a-button type="primary" @click="submit">保存</a-button>
				<a-button @click="reset">重置</a-button>
			</a-form-item>
		</a-form>
	</brs-page>
</template>

<script lang="ts" setup>
	import { useSystemStore } from '@/store/systemStore';
	import { ISystem } from '@/types/ISystem';
	import { Theme } from 'ant-design-vue/lib/config-provider';
	import { reactive, ref } from 'vue';

    
	const systemStore = useSystemStore();
	const labelCol = { style: { width: '100px' } };
	const wrapperCol = { style: { width: 'calc(100% - 100px)' } };
	const aFormRef = ref();
	const form = reactive<ISystem.ISettingConfig>({
		title: systemStore.title,
		background: systemStore.background,
		theme: {
			primaryColor: systemStore.theme.primaryColor,
			infoColor: systemStore.theme.infoColor,
			successColor: systemStore.theme.successColor,
			processingColor: systemStore.theme.processingColor,
			errorColor: systemStore.theme.errorColor,
			warningColor: systemStore.theme.warningColor,
		},
		borderShadowColor: systemStore.borderShadowColor,
	});

	const validatorColor = (rule: any, value: string, callback: (message: string) => void) => {
		const { field } = rule;
		const val = form.theme[field as keyof Theme];
		if (!val) {
			return Promise.reject('请选择一种颜色');
		} else {
			return Promise.resolve();
		}
	};

	const rules = {
		title: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
		primaryColor: [{ required: true, validator: validatorColor, trigger: 'blur' }],
		infoColor: [{ required: true, validator: validatorColor, trigger: 'blur' }],
		successColor: [{ required: true, validator: validatorColor, trigger: 'blur' }],
		processingColor: [{ required: true, validator: validatorColor, trigger: 'blur' }],
		errorColor: [{ required: true, validator: validatorColor, trigger: 'blur' }],
		warningColor: [{ required: true, validator: validatorColor, trigger: 'blur' }],
		borderShadowColor: [{ required: true, message: '请选择阴影颜色', trigger: 'blur' }],
	};


    

	const submit = (e: any) => {
		aFormRef.value.validateFields().then((arr: any[]) => {
            systemStore.setTitle(form.title)
            systemStore.setBackground(form.background)
            systemStore.setTheme(form.theme)
            systemStore.setBorderShadowColor(form.borderShadowColor)
		});
	};

    const reset = ()=>{
        aFormRef.value.resetFields()
    }
</script>

<style lang="less" scoped>
	.form {
		width: 500px;
	}
</style>
